<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<head>
<title>boxPop</title>


<!--random box popping-->
<!--
This game should randomly place boxes, pop them in and
out of existence, drop them accroding to gravity, and
keep track of some kind of score.
-->

<link href="css/gravity.css" type="text/css" rel="stylesheet"/>

</head>
<body>

<div id="wrap"></div>
<script src="js/transforms.js"></script>
<script type="text/javascript">

//2strokeMotor@gmail.com

//////////////////////////////////////////////////////////////////////////////
//	This relies on :::	transforms.js
//  and on the stylesheet ::: gravity.css
//////////////////////////////////////////////////////////////////////////////

var boxPop = function(areaX){


	///////////////////////////////////////////////////////////////
	// setup these values
	var migDir  = 'migs/',
	migExt      = '.png',
	tForm       = new transforms(),//REQUIRES this file

	///////////////////////////////////////////////////////////////
	// customize these defaults
	curLang   = 0,  //0:english;1:spanish;2:austrian
	dropColor =  '#fdb',
	popColor  = [204,183,161],//[207,187,178],//[204,153,102],
	fontColor = '#eaeaea',
	gravity   = 400;

	defaultPopDuration = 1000;
	startingNumOfObjs  = 8,


	///////////////////////////////////////////////////////////////
	// enter the messages in different languages
	msgs    = [
	 ['no such id',''],
	 ['no hay el id',''],
	 ['Es gibt nicht so ID','']
	],
	msgX = function(msgNumber){
					alert(msgs[curLang][msgNumber]);
	},

	///////////////////////////////////////////////////////////////
	// some vars
	zMax = 0,
	resetCount = 0,
	curMig = 0,
	migs = [
	 ['box0','box1'],
	 ['box0','box1']
	],
	wrapH = 0,
	wrapW = 0,	
	dropZone  = 100,
	popZone   = 100,
	isLoaded  = false,
	loadCount = 0,

	notes = document.createElement('div'),
	delArea = document.createElement('div'),
	delArea.innerHTML = 'del';
	objList = new Array(),

	///////////////////////////////////////////////////////////////
	// either objects or get them by id
	areaX = (typeof(areaX)=='string')?document.getElementById(areaX):(!areaX)? alert(msgs[curLang][0]) : areaX;

	///////////////////////////////////////////////////////////////
	// some useful functions

	this.setCurLang = function(i){ if(msgs[i]) curLang = i};
	this.setMigDir  = function(v){if(typeOf(v)=='string')migDir=v};
	this.setMigExt  = function(v){if(typeOf(v)=='string')migExt=v};
	this.changeFont = function(v){try{notes.style.font=v}catch(T){}};

	var clearDiv = function(d){ if(d.hasChildNodes()){
			while(d.childNodes.length >= 1){
				d.removeChild(d.firstChild);
			}
		}
	};

	var makeNote = function(val){notes.innerHTML = val;return;};

	var reset = function(){ return };

	var getStyleVal = function(obj,val){
		return document.defaultView.getComputedStyle(obj,null).getPropertyValue(val);
	};

	var oldXY = [0,0];
	var newXY = [0,0];
	var handleTouch = function(e){

		e.preventDefault();

		var Xpos = e.touches[0].pageX - this.offsetLeft;
		var Ypos = e.touches[0].pageY - this.offsetTop;

		for(var i=0;i<objList.length;i++){
		 if(objList[i].isActive){
		 if(
		  Xpos > objList[i].L &&
		  Xpos < objList[i].L+objList[i].W &&
		  Ypos > objList[i].T &&
		  Ypos < objList[i].T+objList[i].H
		 ){
			objList[i].isActive = false;
			popObj(objList[i]);
		 }
		}}
	};

	var handleMove = function(e){

		e.preventDefault();

		var Xpos = e.clientX - this.offsetLeft;
		var Ypos = e.clientY - this.offsetTop;

		newXY = [Xpos, Ypos];
		var dir = (newXY[0]-oldXY[0] < 0) ? 'left' : 'right';
		var m = (oldXY[1]-newXY[1])/((oldXY[0]-newXY[0])+.000001);
		var updn = '';
		if(m>0){
			updn = (dir=='left')? 'up' : 'down';
		}else{//m<0
			updn = (dir=='right')? 'up' : 'down';
		}
		//makeNote(dir +' ::: '+ updn);

		oldXY = newXY;

		/*
		newXY = [Xpos, Ypos];

		var m = (oldXY[1]-newXY[1])/((oldXY[0]-newXY[0])+.000001);
		var b = newXY[1] - m*newXY[0];
		m = -m;
		makeNote(m +' ::: '+ b);

		oldXY = newXY;

		for(var i=0;i<objList.length;i++){
		 obj = objList[i];
		 if(!obj.isActive)return;
		 if(
		 (m*obj.T+b > obj.L && m*obj.T+b < obj.L + obj.H)||
		 (m*(obj.T+obj.W)+b>obj.L && m*(obj.T+obj.W)+b<obj.L+obj.H)||
		 ((obj.L-b)/m>obj.T && (obj.L-b)/m < obj.T+obj.W)||
		 ((obj.L+obj.H-b)/m>obj.T && (obj.L+obj.H-b)/m<obj.T+obj.W)
		 ){
		  objList[i].isActive = false;
		  popObj(objList[i]);
		 }
		}
		return;
		*/

		for(var i=0;i<objList.length;i++){
		 if(
		  objList[i].isActive 
		  && Xpos > objList[i].L
		  && Xpos < objList[i].L+objList[i].W
		  && Ypos > objList[i].T
		  && Ypos < objList[i].T+objList[i].H
		 ){
			objList[i].isActive = false;
			popObj(objList[i]);
			makeNote(objList.length);
		 }
		}
	};


	var popObj = function(obj){

		obj.IV = ~~(Math.random()*-300 - 100);
		obj.HV = ~~(Math.random()* 400 - 200);
		//obj.SR = ~~(((Math.random()*3)+1)*360);
		var r = Math.random();
		var r = (~~(r*10)%5 == 4) ? r*2880 + 360 : r*540 + 360;
		obj.SR = ~~(r);

		this.animatePop = function(obj,startT){
			var per = (+new Date - startT)/obj.popDur;
			if(per <= 1){
			 per = tForm.popIn(per,1.2,.3);
			 var tmpW = obj.W*per;
			 var tmpH = obj.H*per;
			 obj.S.width  = tmpW +'px';
			 obj.S.height = tmpH +'px';
			 obj.S.top    = ~~(obj.T+obj.W2-tmpW/2) +'px';
			 obj.S.left   = ~~(obj.L+obj.H2-tmpH/2) +'px';
			 setTimeout(function(){animatePop(obj,startT)},0);
			}else{
			 obj.isActive   = true;
			 obj.isDropping = false;
			 if(obj.onComplete) obj.onComplete.call();
			 // onCompletes REMOVE after call
			 obj.onComplete = null;//function(){}; 
			 //animateDrop(obj,+new Date);
			 return;
			}
		};

		animateDrop = function(obj,startT){if(obj.isDropping){

			var t = (+new Date - startT)/1000;

		 	if(parseInt(obj.style.top) <= dropZone){

		   // move it
			 var d = obj.T + obj.IV*t + gravity*t*t;
			 var l = obj.L + obj.HV*t;

			 obj.style.top  = d +'px';
			 obj.style.left = l +'px';

			 // twix it
			 obj.style.MozTransform    = 'rotate('+(obj.R+obj.SR*t)+'deg)';
			 obj.style.webkitTransform = 'rotate('+(obj.R+obj.SR*t)+'deg)';

			 // fade it
			 //obj.S.opacity = (t>1.5) ? 0 : (1-t/1.5);

			 // loop it
			 setTimeout(function(){animateDrop(obj,startT)},0);

			}else{

				if(obj.forDelete == true){
					areaX.removeChild(obj);
					//makeNote(loadObj.count);
					return;
				}

				obj.T = ~~(Math.random()*(popZone-obj.H));
				obj.L = ~~(Math.random()*(wrapW-obj.W));
			 	obj.R = ~~((Math.random()*60)-30);
			 (obj.R > 0) ? obj.R += 5 : obj.R -=5;

				obj.S.MozTransform    = 'rotate('+obj.R+'deg)';
				obj.S.webkitTransform = 'rotate('+obj.R+'deg)';

				obj.S.opacity = 1;

				//obj.src = migs[curMig][(++obj.tog)%2].src;
				obj.src = migs[curMig][(++obj.tog)%migs[curMig].length].src;

				setTimeout(function(){animatePop(obj,+new Date)},500);
				return;

			}
		}};

		obj.isDropping = true;
		animateDrop(obj,+new Date);

	};

	var loadMigs = function(){
		for(var i in migs){
		 for(var j=0;j<migs[i].length;j++){
			var tmpSrc = migDir + migs[i][j] + migExt;
			migs[i][j] = new Image();
			migs[i][j].src  = tmpSrc;
			migs[i][j].onload = function(){
			  loadCount++;
				checkLoad(this);
			};
		 }
		}
	};

	var checkLoad = function(){
		if(loadCount == migs.length*2){
		 for(var i=0;i<startingNumOfObjs;i++){
			setTimeout(function(){loadObj()},300*i);
		 }
		}
	},

	loadObj = function(){

		 obj = migs[curMig][0].cloneNode(true);

		 areaX.appendChild(obj);//do this here for firefox

		 obj.tog = ~~(Math.random()*migs[curMig].length);//toggleCount;
		 obj.src = migs[curMig][obj.tog].src;

		 obj.W  =    obj.width;
		 obj.H  =    obj.height;
		 obj.W2 = ~~(obj.W/2);
		 obj.H2 = ~~(obj.H/2);
		 obj.T  = ~~(Math.random()*(popZone-obj.H));
		 obj.L  = ~~(Math.random()*(wrapW-obj.W));
		 obj.R  = ~~((Math.random()*60)-30);
		(obj.R  > 0) ? obj.R += 5 : obj.R -=5;

		 obj.style.MozTransform    = 'rotate('+obj.R+'deg)';
		 obj.style.webkitTransform = 'rotate('+obj.R+'deg)';

		 obj.IV = 0;//initial velocity
		 obj.HV = 0;//horizontal velocity
		 obj.SR = 0;//spin rate
		 obj.NM = loadObj.count;//id NuMber for splice removing

		 obj.S  = obj.style;
		 obj.isActive = false;
		 obj.popDur   = defaultPopDuration;
		 obj.onComplete = function(){};
		 obj.isDropping = false;

		 obj.S.top    = obj.T + 'px';
		 obj.S.left   = obj.L + 'px';
		 obj.S.width  = obj.W + 'px';
		 obj.S.height = obj.H + 'px';


		 popObj(obj);

		 objList[loadObj.count] = obj;
		 loadObj.count++;
		 makeNote(loadObj.count);

	};
	loadObj.count = 0;


	var removeObj = function(){if(objList.length > 0){
		//var obj = objList[objList.length-1];
		var obj = objList[0];
		if(!obj.isActive) return;
		obj.forDelete = true;
		//objList.splice(obj.NM,1);
		objList.splice(0,1);
		loadObj.count--;
		makeNote(loadObj.count);
	  popObj(obj);
	}};

	this.popRemove = function(){removeObj()};

	var placeObj = function(obj){
		obj.S.top    = obj.T - obj.H2 +'px';
		obj.S.left   = obj.L - obj.W2 +'px';
	};

	var noteClick = function(){
		loadObj();
		return false;
	};
	var delClick = function(){
		removeObj();
		return false;
	};

	///////////////////////////////////////////////////////////////
	//  init
	var init = function(){

		//setup the popColor var string
		popColor = 'rgba('+popColor[0]+','+popColor[1]+','+popColor[2]+',';

		// empty the area if it has children
		clearDiv(areaX);

		// setup these vars
		wrapW = areaX.offsetWidth  || 480;
		wrapH = areaX.offsetHeight || 320;
		dropZone += wrapH;
		popZone = wrapH-popZone;

		// add the notesArea
		notes.setAttribute('class','notes');
		delArea.setAttribute('class','notes');
		delArea.style.left='230px';
 		areaX.appendChild(notes);
 		areaX.appendChild(delArea);

		//1320987600000   nov 11 2011
		//1353560400000   nov 22 2012

		//if((+new Date)>1353560400000){makeNote('eXp!red');return;}
		makeNote('loading...');

		// load the images
		// when the images are all loaded
		// objs will get added to the area
		loadMigs();

		// listen for mouse/touch position
		areaX.addEventListener('mousemove',handleMove,false);
		areaX.addEventListener('touchmove',handleTouch,false);
		notes.addEventListener('click',noteClick,false);
		notes.addEventListener('touchstart',noteClick,false);
		delArea.addEventListener('click',delClick,false);
		delArea.addEventListener('touchstart',delClick,false);

		if(notes.touchstart){
			notes.removeEventListener('click',noteClick,false);
			delArea.removeEventListener('click',delClick,false);
			areaX.removeEventListener('mousemove',handleMove,false);
		}


	}(areaX);// also call init

}('wrap');

//BP = new boxPop('wrap');
//boxPop('wrap');

document.onmousemove = function(e){
	e.preventDefault();
	//e.stopPropagation();
	return false;
};

document.ontouchstart = document.onmousemove;
document.ontouchmove  = document.onmousemove;

</script>

</body>
</html>
